<template>
  <div class="measureTool">
    <div class="title-top">
      <div class="left">
        <i class="line"></i>
        <p class="text">测量</p>
      </div>
      <i class="el-icon-close" @click="close"></i>
    </div>
    <div
      class="measureItem"
      :class="measureId == 1 ? 'mactive' : ''"
      @click="measureClick(1)"
    >
      <img
        :src="
          measureId == 1
            ? require('@/assets/mapView/ic_celiangjuli-s.png')
            : require('@/assets/mapView/ic_celiangjuli-u.png')
        "
        alt=""
      />
      测量距离
    </div>
    <div
      class="measureItem"
      :class="measureId == 2 ? 'mactive' : ''"
      @click="measureClick(2)"
    >
      <img
        :src="
          measureId == 2
            ? require('@/assets/mapView/ic_celiangmianji-s.png')
            : require('@/assets/mapView/ic_celiangmianji-u.png')
        "
        alt=""
      />
      测量面积
    </div>
  </div>
</template>

<script>
import * as mapUtils from '@/components/mapOl/mapUtils'
export default {
  props: {
    isShowMeasureTool: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      measureId: 0
    }
  },
  watch: {
    isShowMeasureTool(val) {
      if (!val) {
        this.measureId = 0
      }
    },
    deep: true
  },
  methods: {
    measureClick(id) {
      this.measureId = id
      if (id === 1) {
        mapUtils.measureAddInteraction('LineString')
      } else {
        mapUtils.measureAddInteraction('Polygon')
      }
    },
    close() {
      this.measureId = ''
      this.$emit('closeMeasure')
    }
  }
}
</script>

<style lang="scss" scoped>
.measureTool {
  text-align: left;
  width: 400px;
  max-height: 177px;
   background: linear-gradient(90deg, #031B36 0%, rgba(3,28,51,0.3) 100%);
border-radius: 0px 0px 0px 0px;
opacity: 1;
border: 1px solid;
border-image: linear-gradient(90deg, rgba(0, 48, 76, 1), rgba(0, 48, 76, 1)) 1 1;
  position: absolute;
  top:77px;
 right: 26px;
  color: #333;
  z-index: 1;
  .title-top{

    display: flex;
    justify-content: space-between;
    background: #000000 url('@/assets/img/tjtitle.png') no-repeat;
    background-size: 100% 100%;
    width: 400px;
    height: 46px;
    line-height: 30px;
    align-items: center;
    .left{
      height: 100%;
      display: flex;
      align-items: center;

      .text{
        font-size: 14px;
        color: #c3d4fd;
        text-indent: 60px;
        font-size: 20px;
      }
    }
    .el-icon-close{
      margin-right: 5px;
      cursor: pointer;
      color: #fff;
    }
  }
  .layersTitle{
    width:100%;
    padding-top:10px;
    border-bottom: 1px solid #E4E9F0;
    padding-bottom: 5px;
    .drawToolHeader {
      display: inline-block;
      height: 22px;
      margin-left: 15px;
      font-weight: 500;
      font-size: 20px;
      line-height: 22px;
      border-left: 4px solid #3C6EF0;
      padding-left: 5px;
      color:#333333 ;
    }
  }
  .measureItem {
    width: 100%;
    height: 42px;
    font-size: 15px;
    line-height: 42px;
    cursor: pointer;
    color: #fff;
    text-align: center;
  }
  .mactive{
    color: #fff;
    background: #4481FA;
  }
}
</style>
